import * as React from 'react';
import Paper from '@mui/material/Paper';
import InputBase from '@mui/material/InputBase';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import Box from '@mui/material/Box';

import DropDown from '../dropdown/DropDown'

export default function Filter({ handlerAction, region,setRegion}) {
  const filterHandler = (event)=> {
    handlerAction(event.target.value);
  }
  return (
    <Box p={"2px 0px"}  sx={{ display: 'flex', alignItems: 'center', justifyContent:"space-between", flexWrap:"wrap"}} >
      <Paper
        component="form"
        sx={{ m:1, p: '2px 0px', display: 'flex', alignItems: 'center', justifyContent:"space-between" , width:"300px" }}
      >
        <IconButton type="submit" sx={{ p: '10px' }} aria-label="search">
          <SearchIcon />
        </IconButton>
        <InputBase
          sx={{ flex: 1 }}
          placeholder="Search for a country..."
          onChange={filterHandler}
          inputProps={{ 'aria-label': 'Search for a country' }}
        />
      </Paper>
      <DropDown m={1} curRegion ={region} setRegion={setRegion}/>
    </Box>
  );
}
